<template>
  
        <div class="goodsEntry">
          
            <!-- <div>入库</div> -->
          <ul class="query">
            <li class="query-item">
              <el-button type="plain" @click="returnOver">返回</el-button>
              
              <el-button type="primary" size="medium" @click="newlybuild">新建货位</el-button>
              <!-- <el-button type="primary" size="medium" @click="exportData">导出</el-button> -->
              
            </li>
           
          </ul>
          <!-- <el-row class="entry-info">
             
           
          
           <el-col :span="4" :offset="2" class="btn-wrapper">
              <el-button type="primary" size="small" @click="okentry">确认入库</el-button>
              <el-button type="warning" size="small" @click="canceloffAll">取消录入</el-button>
            </el-col>
            
          </el-row> -->
          <div class="wrapper">
            <el-table class="table" :data="tableData" stripe highlight-current-row border>
              <el-table-column align="center" prop="id" label="货位ID" width="100">
              </el-table-column>
              <el-table-column align="center" prop="areaName" label="货位名称">
              </el-table-column>
              <el-table-column align="center" prop="areaType" label="类型">
                <template slot-scope="scope">
                  <span v-html="scope.row.areaType==0?'新酒货位':'转让货位'"></span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="unit" label="单位">
               <template slot-scope="scope">
                  <span v-html="scope.row.unit=='0'?'瓶':scope.row.unit=='1'?'坛':'桶'"></span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="areaNum" label="总可存量/单位">
              </el-table-column>
              <el-table-column align="center" prop="usedNum" label="现存量/单位">
              </el-table-column>
              <el-table-column align="center" prop="unusedNum" label="余量/单位">
              </el-table-column>
             <el-table-column align="center" prop="address" label="操作" width="300">
                <template slot-scope="scope">
                    <!-- <el-button type="text" size="small" @click="cargo(scope.row)">查看</el-button> -->
                    <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small" @click="canceloffOne(scope.row)">删除</el-button>
                    
                  <!-- <span class="canceloff-btn" @click="canceloffOne">编辑</span>
                  <span class="canceloff-btn" @click="canceloffOne">货物管理</span>
                  <span class="canceloff-btn" @click="canceloffOne">删除</span>
                  <span class="canceloff-btn" @click="canceloffOne">禁用</span> -->
                </template>
              </el-table-column>
            </el-table>
            <el-pagination background 
            layout="total,prev, pager, next,jumper" 
            :page-size="page.pageSize" 
            :total="page.total" 
            :current-page="page.currentPage"
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>
        
          <el-dialog :title="newTitle" :visible.sync="goodsCates.show">
              <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="货位名称" :label-width="formLabelWidth" prop="areaName">
                  <el-input v-model="form.areaName" placeholder="请填写货位名称" auto-complete="off" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth" prop="areaNum">
                    <!-- <el-input-number v-model="name2" @change="handleChange" :min="1"  label="描述文字"></el-input-number> -->
                    <el-input v-model.number="form.areaNum" placeholder="请填写数量" auto-complete="off" style="width:400px"></el-input>
                </el-form-item>
                <!-- <el-form-item label="类型" :label-width="formLabelWidth" prop="areaType">
                  <el-select v-model="form.areaType" placeholder="请选择类型" style="width:300px">
                    <el-option label="转让货位" value="1"></el-option>
                    <el-option label="新酒货位" value="0"></el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item label="单位" :label-width="formLabelWidth" prop="unit">
                  <el-select v-model="form.unit" placeholder="请选择单位" style="width:300px">
                    <el-option label="瓶" value="0"></el-option>
                    <el-option label="坛" value="1"></el-option>
                    <el-option label="桶" value="2"></el-option>
                  </el-select>
                  
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="goodsCates.show = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">保存</el-button>
              </div>
            </el-dialog>
        </div>
      </template>
      
      <script>
        export default {
          data() {
            return {
             height: "auto",
              queryData: {
                starttime:'',
                endtime:'',
                keyword:'',
                category:''
              },
              goodsCates: {
                show: false,
                
              },
              newTitle:'',
              tableData: [],
              form: {
              depotId:sessionStorage.getItem('id'),
              areaName: '',
              areaNum:'',
              // areaType:'',
              unit:'',
             
            },
            nums:'',
            rules: {
              areaName: [
                { required: true, message: '请输入货位名称', trigger: 'blur' },
                
              ],
              areaNum: [
                { required: true, message: '请输入正确的阿拉伯数字', trigger: 'blur',type:'number' },
               
              ],
              areaType: [
              { required: true, message: '请选择类型', trigger: 'change' }
               
              ],
              unit: [
              { required: true, message: '请选择单位', trigger: 'change' }
               
              ],
            },
            formLabelWidth: '120px',
              page: {
                pageSize: 10,
                currentPage: 1,
                depotId: sessionStorage.getItem('id')
                // total: 100
              },
            
              
            };
          },
          mounted () {
            console.log(this.$route)
            this.tableList();
          },
          methods: {
           
            canceloffOne(row) {
              this.$confirm("取消将删除记录，您确定要删除吗?", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.delete(row.id)
                // this.$message({
                //   type: "success",
                //   message: "删除成功!"
                // });
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
            },
            handleCurrentChange(val) {
              this.page.currentPage = val;
              this.tableList();

              // console.log(val);
            },
            showCateDialog() {
             
            },
            //新增
            newlybuild(){
              this.goodsCates.show = true;
              this.newTitle = '新增货位';
              this.form.areaName = '';
              this.form.areaNum = '';
              this.form.areaType = ''
              this.form.unit = ''
              
            },
            //编辑
            editClick(row){
              console.log(row);
              this.nums = row.areaNum;
              this.form.id = row.id
              this.form.areaName = row.areaName;
              this.form.areaNum = row.areaNum;
              // this.form.areaType = row.areaType;
              // this.form.unit = row.unit;
              // if(row.areaType == '转让货位'){
              //   this.form.areaType = '1'
              // }else{
              //   this.form.areaType = '0'
              // }
              switch(row.unit){
                case '0':
                this.form.unit = '0'
                break;
                case '1':
                this.form.unit = '1'
                break;
                case '2':
                this.form.unit = '2'
                break;
                default:
              }
              this.goodsCates.show = true;
              this.newTitle = '编辑货位'
            },
            //删除
            async delete(id) {
              try {
                let { data } = await this.$post({
                  api: "/depotArea/delDepotArea",
                  data:{
                    id:id
                  }
                });
                console.log(data)
                if (data.code === 0) {
                 
                  this.$message({
                  type: "success",
                  message: '操作成功'
                });
                // this.goodsCates.show = false;
                this.tableList();
                // this.$refs[formName].resetFields();
                  // console.log(data)
                  // this.rawList = data.data;
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                this.$message({
                  type: "error",
                  message: "接口报错"
                });
              }
            },
            //
            submitForm(formName) {
              console.log(formName)
              this.$refs[formName].validate((valid) => {
                if (valid) {
                 if(this.newTitle == '新增货位'){
                  this.addList();
                 }else{
                   if(this.form.areaNum <  this.nums){
                    this.$message({
                      type: "error",
                      message: '数量需大于当前已存放数量'
                    });
                   }else{
                      this.updateList(this.form);
                   }
                   console.log(formName)
                 
                 }
                } else {
                  // console.log('error submit!!');
                  return false;
                }
              });
            },
            // //货位管理
            // cargo(row){
            //   // console.log(this.urlid)
            //   this.$router.push('/warehousemanagement/'+this.$route.params.id+'/'+row.id)
            // },
            //初始化数据
            async tableList() {
              try {
                let { data } = await this.$post({
                  api: "/depotArea/get/depotAreaList",
                  data:this.page
                });
                if (data.code === 0) {
                  console.log(data)
                  this.tableData = data.data.list;
                 
                  this.page.total = data.data.total;
                } else {
                  // this.$message({
                  //   type: "error",
                  //   message: data.msg
                  // });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
            },
       
            async addList() {
              try {
                let { data } = await this.$post({
                  api: "/depotArea/addDepotArea",
                  data:this.form
                });
                if (data.code === 0) {
                  this.$message({
                  type: "success",
                  message: '操作成功'
                });
                this.goodsCates.show = false;
                this.tableList();
                // this.$refs[formName].resetFields();
                  // console.log(data)
                  // this.rawList = data.data;
                } else {
                  // this.$message({
                  //   type: "error",
                  //   message: data.msg
                  // });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
            },
             //编辑
             async updateList(params) {
              try {
                let { data } = await this.$post({
                  api: "/depotArea/updateDepotArea",
                  data:params
                });
                if (data.code === 0) {
                  console.log(data)
                  this.$message({
                  type: "success",
                  message: '操作成功'
                });
                this.goodsCates.show = false;
                this.tableList();
                // this.$refs[formName].resetFields();
                  // console.log(data)
                  // this.rawList = data.data;
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                this.$message({
                  type: "error",
                  message: "接口报错"
                });
              }
            },
            returnOver(){
              this.$router.go(-1);
            }
          }
        };
      </script>
      
      <style lang="scss" scoped>
        .query {
          overflow: hidden;
          border-bottom: 1px solid #eeeeee;
          &-item {
            float: left;
            margin: 15px 20px;
          }
          .el-input {
            width: 150px;
          }
          .el-button {
            margin: 0 15px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      
        .entry-info {
          padding: 15px 20px;
          border-bottom: 1px solid #eeeeee;
        }
      
        .goods-category {
          line-height: 32px;
          span {
            color: #0033ff;
            text-decoration: underline;
            cursor: pointer;
          }
        }
      
        .goods-count {
          line-height: 32px;
        }
      
        .goods-id {
          display: flex;
          justify-content: space-between;
          padding: 0 40px;
          border-left: 1px solid #000;
          border-right: 1px solid #000;
          span {
            position: relative;
            display: inline-block;
            padding: 8px 15px;
            border: 1px solid #333;
            &:after {
              content: "";
              position: absolute;
              top: -6px;
              left: -6px;
              width: 100%;
              height: 100%;
              padding: 6px;
              border: 1px solid #333;
            }
          }
        }
      
        .wrapper {
          padding: 10px 15px;
        }
      
        .canceloff-btn {
          color: #0033ff;
          cursor: pointer;
        }
      </style>
    
    